<!DOCTYPE html>
<html lang="en">

<head>
    <title>WebSocket聊天宝</title>
    <link rel="stylesheet" href="http://cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/mdui.min.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/index.js"></script>
    <meta charset="UTF-8">
</head>


<body class="mdui-appbar-with-toolbar mdui-bottom-nav-fixed">
    <!-- 顶部标题 -->
    <div class="mdui-appbar mdui-appbar-fixed">
        <div class="mdui-toolbar mdui-color-indigo">
            <a class="mdui-typo-headline">Cloud</a>
            <a class="mdui-typo-title">WebSocket聊天宝</a>
            <div class="mdui-toolbar-spacer"></div>
            <a href="login.html">退出聊天宝</a>
        </div>
    </div>
    <!-- 内容信息 -->
    <div class="mdui-row">
        <!-- 聊天内容 -->
        <div class="mdui-col-xs-6 mdui-bg-left" id="userContent">
        </div>
        <!-- 系统内容 -->
        <div class="mdui-col-xs-6 mdui-bg-right" id="systemContent">
            <p>当前在线人数：<span id="count">{{count}}</span></p>
            <div class="inset-dark"></div>
        </div>
    </div>

    <!-- 底部标题 -->
    <div class="mdui-color-blue-200" style="width: 100%;height: 150px;position: fixed;bottom: 0;">
        <div class="mdui-row">
            <div class="mdui-col-xs-4 mdui-col-sm-4">
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <i class="mdui-icon material-icons">message</i>
                    <label class="mdui-textfield-label" >消息内容</label>
                    <input class="mdui-textfield-input" id="sendMessage" />
                </div>
            </div>  
            <div class="mdui-col-xs-2 mdui-col-sm-2" style="margin-top: 30px;">
                <button class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons" onclick="sendMessage()">send</i></button>
            </div>

            <div class="mdui-col-xs-6 mdui-col-sm-6">
                <h3>当前使用昵称:<span id="username">{{username}}</span></h3>
            </div>
        </div>
    </div>
</body>

</html>